<template>
  <div class="">
    <div class="container step-block">
      <span>Step2: 设置校准周期</span>
      <el-button @click="$emit('change', 0)" type="primary">上一步</el-button>
    </div>
    <div class="step-content container">
      <div style="display: flex; justify-content: space-between">
        <el-form :inline="true">
          <el-form-item label="校准批次：">
            <el-input
              v-model="query.batch"
              placeholder="请输入本次校准批次，如202311-1"
              clearable
            />
          </el-form-item>
          <el-form-item label="本次校准周期开始时间：">
            <el-date-picker
              type="datetime"
              v-model="query.startTime"
              placeholder=""
              clearable
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="本次校准周期结束时间：">
            <el-date-picker
              type="datetime"
              v-model="query.endTime"
              placeholder=""
              clearable
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss "
            />
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" size="large" @click="startFix"
            >开始校准</el-button
          >
        </div>
      </div>

      <el-table :data="tableData" border ref="multipleTable">
        <el-table-column width="100" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{ indexMethod(scope.$index, query.page, query.pageSize) }}
          </template>
        </el-table-column>
        <template v-for="item in columns">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-if="item.prop === 'deviceStatus'"
          >
            <template v-slot="scope">
              {{ ["在线", "离线"][scope.row[item.prop]] }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
        </template>
      </el-table>

      <!-- <el-pagination
        style="margin-top: 20px"
        background
        layout="prev, pager, next"
        @current-change="query.change"
        :total="query.total"
      >
      </el-pagination> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { indexMethod } from "@/utils/tools"
import { startCalibration } from "@/api"
import { useTool } from "./useTool"
const { selectItem, selectIds, calibrationBatch, endTime } = useTool()

useTableHight()

const emits = defineEmits(["change"])

const query = reactive({
  batch: "",
  startTime: "",
  endTime: "",
  total: 0,
  page: 1,
  pageSize: 10,
  change: (page) => {
    // query.page = page
    // getData()
  }
})

const tableData = ref([])
const columns = ref([
  { prop: "ttt", label: "校准批次" },
  { prop: "deviceBarCode", label: "设备条形码编号" },
  { prop: "deviceNo", label: "设备ID" },
  { prop: "bb", label: "校准开始时间" },
  { prop: "zz", label: "校准结束时间" }
])

const startFix = async () => {
  const res = await startCalibration({
    calibrationBatch: query.batch || calibrationBatch.value,
    calibrationEndTime: query.endTime,
    calibrationStartTime: query.startTime,
    ids: selectIds.value
  })
  emits("change", 2)
  calibrationBatch.value = query.batch
  endTime.value = query.endTime
}

const getData = () => {
  tableData.value = selectItem.value
}

onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
.step-content {
  position: relative;
  .el-input {
    width: 220px;
  }
}
</style>
